<template>
	<view class="login-page">
		<view class="input-group">
			<input type="text" placeholder="账号/小狗ID/手机号码" v-model="user.username" />
		</view>
		<view class="input-group">
			<input class="uni-input" placeholder="请输入密码" :password="showPassword" v-model="user.pwd" />
			<uni-icons class="eye-filled checkbtn" type="eye-filled" color="#fab3b3"
				:class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword" size="30"></uni-icons>
		</view>
		<button @click="dologin" class="btn" :disabled="!isBtnChecked"
			:class="{ 'btn-active': isBtnChecked }">登录</button>
		<p class="policy_tip">
			<checkbox-group @change="checkboxChange">
				<checkbox style="transform:scale(0.7)" color="#ff0000" /><text>我已阅读并同意<!----><a href="#">《京东用户服务协议》</a>
					<a href="#">《用户隐私政策》</a> <!----></text>
			</checkbox-group>
		</p>
	</view>
</template>

<script>
	import jpa from '../../jpa/jpa.js';
	
	import { getLogin } from '../../jpa/login.js';

	export default {
		onLoad() {
			undefined
			console.log('隐藏tabbar')
			uni.hideTabBar()
		},
		data() {
			return {
				user: {
					username: "",
					pwd: ""
				},
				isBtnChecked: false,
				showPassword: false
			}
		},
		methods: {
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			checkboxChange() {
				console.log("修改but")
				this.isBtnChecked = !this.isBtnChecked
			},
			dologin() {
				getLogin(this.user.username,this.user.pwd).then(data=>{
					if(data != 0){
						uni.setStorageSync('token',data);
						if(uni.getStorageSync("argsUrl") != null && uni.getStorageSync("argsUrl") != ""){
							uni.reLaunch({
								url:uni.getStorageSync("argsUrl")
							})
						} else {
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
						
					} else {
						uni.showToast({
							title:"账号密码错误",
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style>
	a {
		text-decoration: none;
	}

	.icon-goback {
		top: 10px;
		background-image: url();
		width: 24px;
		height: 24px;
		overflow: hidden;
		display: block;
		position: absolute;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.checkbtn {
		position: absolute;
		right: 4.3rem;
		top: 6.13rem;
	}

	.uni-eye-active {
		color: #f10000 !important;
	}

	.btn {
		margin-top: .5rem;
		display: block;
		background-color: #efefef;
		color: #fff;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #fab3b3), color-stop(73%, #ffbcb3), to(#ffcaba));
		background-image: -webkit-linear-gradient(left, #fab3b3, #ffbcb3 73%, #ffcaba);
		background-image: -o-linear-gradient(left, #fab3b3 0, #ffbcb3 73%, #ffcaba 100%);
		background-image: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
		-webkit-box-shadow: 0 .1rem 20px 0 rgba(255, 62, 62, .2);
		box-shadow: 0 .1rem 20px 0 rgba(255, 62, 62, .2);
	}

	.policy_tip {
		text-align: center;
		margin-top: 2.5rem;
		font-size: 15px;
	}

	.login-page {
		padding: 30px;
		/* text-align: center; */
	}

	.input-group {
		margin-bottom: 20px;
	}

	input {
		padding: 10px;
		border-radius: 5px;
		outline: none;
	}

	button {
		padding: 2px 20px;
		background-color: #07c160;
		color: #fff;
		border: none;
		border-radius: 28px;
	}

	.btn-active {
		background-image: -webkit-gradient(linear, left top, right top, from(#f10000), color-stop(73%, #ff2000), to(#ff4f18));
		background-image: -webkit-linear-gradient(left, #f10000, #ff2000 73%, #ff4f18);
		background-image: -o-linear-gradient(left, #f10000, #ff2000 73%, #ff4f18);
		background-image: linear-gradient(90deg, #f10000, #ff2000 73%, #ff4f18);
	}
</style>